<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>爱心</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: #1e1e1e;
      }
    </style>
  </head>

  <body>
    <canvas id="drawHeart"></canvas>

    <script>
      var hearts = []
      var canvas = document.getElementById('drawHeart')
      var wW = window.innerWidth
      var wH = window.innerHeight
      // 创建画布
      var ctx = canvas.getContext('2d')
      // 创建图片对象
      var heartImage = new Image()
      heartImage.src = 'img/heart.svg'
      var num = 100

      init()

      window.addEventListener('resize', function () {
        wW = window.innerWidth
        wH = window.innerHeight
      })
      // 初始化画布大小
      function init() {
        canvas.width = wW
        canvas.height = wH
        for (var i = 0; i < num; i++) {
          hearts.push(new Heart(i % 5))
        }
        requestAnimationFrame(render)
      }

      function getColor() {
        var val = Math.random() * 10
        if (val > 0 && val <= 1) {
          return '#00f'
        } else if (val > 1 && val <= 2) {
          return '#f00'
        } else if (val > 2 && val <= 3) {
          return '#0f0'
        } else if (val > 3 && val <= 4) {
          return '#368'
        } else if (val > 4 && val <= 5) {
          return '#666'
        } else if (val > 5 && val <= 6) {
          return '#333'
        } else if (val > 6 && val <= 7) {
          return '#f50'
        } else if (val > 7 && val <= 8) {
          return '#e96d5b'
        } else if (val > 8 && val <= 9) {
          return '#5be9e9'
        } else {
          return '#d41d50'
        }
      }

      function getText() {
        var val = Math.random() * 10
        if (val > 1 && val <= 3) {
          return 'Love'
        } else if (val > 3 && val <= 5) {
          return 'Love'
        } else if (val > 5 && val <= 8) {
          return 'Love'
        } else if (val > 7 && val <= 9) {
          return 'Love'
        } else {
          return 'I Love You'
        }
      }

      function Heart(type) {
        this.type = type
        // 初始化生成范围
        this.x = Math.random() * wW
        this.y = Math.random() * wH

        this.opacity = Math.random() * 0.5 + 0.5

        // 偏移量
        this.vel = {
          x: (Math.random() - 0.5) * 5,
          y: (Math.random() - 0.5) * 5
        }

        this.initialW = wW * 0.5
        this.initialH = wH * 0.5
        // 缩放比例
        this.targetScale = Math.random() * 0.15 + 0.02 // 最小0.02
        this.scale = Math.random() * this.targetScale

        // 文字位置
        this.fx = Math.random() * wW
        this.fy = Math.random() * wH
        this.fs = Math.random() * 10
        this.text = getText()

        this.fvel = {
          x: (Math.random() - 0.5) * 5,
          y: (Math.random() - 0.5) * 5,
          f: (Math.random() - 0.5) * 2
        }
      }

      Heart.prototype.draw = function () {
        ctx.save()
        ctx.globalAlpha = this.opacity
        ctx.drawImage(heartImage, this.x, this.y, this.width, this.height)
        ctx.scale(this.scale + 1, this.scale + 1)
        if (!this.type) {
          // 设置文字属性
          ctx.fillStyle = getColor()
          ctx.font = 'italic ' + this.fs + 'px sans-serif'
          // 填充字符串
          ctx.fillText(this.text, this.fx, this.fy)
        }
        ctx.restore()
      }
      Heart.prototype.update = function () {
        this.x += this.vel.x
        this.y += this.vel.y

        if (this.x - this.width > wW || this.x + this.width < 0) {
          // 重新初始化位置
          this.scale = 0
          this.x = Math.random() * wW
          this.y = Math.random() * wH
        }
        if (this.y - this.height > wH || this.y + this.height < 0) {
          // 重新初始化位置
          this.scale = 0
          this.x = Math.random() * wW
          this.y = Math.random() * wH
        }

        // 放大
        this.scale += (this.targetScale - this.scale) * 0.1
        this.height = this.scale * this.initialH
        this.width = this.height * 1.4

        // -----文字-----
        this.fx += this.fvel.x
        this.fy += this.fvel.y
        this.fs += this.fvel.f

        if (this.fs > 50) {
          this.fs = 2
        }

        if (this.fx - this.fs > wW || this.fx + this.fs < 0) {
          // 重新初始化位置
          this.fx = Math.random() * wW
          this.fy = Math.random() * wH
        }
        if (this.fy - this.fs > wH || this.fy + this.fs < 0) {
          // 重新初始化位置
          this.fx = Math.random() * wW
          this.fy = Math.random() * wH
        }
      }

      function render() {
        ctx.clearRect(0, 0, wW, wH)
        for (var i = 0; i < hearts.length; i++) {
          hearts[i].draw()
          hearts[i].update()
        }
        requestAnimationFrame(render)
      }
    </script>
  </body>
</html>
